Jetpack Compose Alpha 版现已发布！

作者 / Google 产品总监 Karen Ng

Jetpack Compose 是一个现代化的 UI 工具包，旨在帮助开发者通过原生平台 API 简单快捷地在全 Android 平台构建精美应用，它能大幅降低代码量并包含交互式工具，以及使用直观的 Kotlin API，为您的应用增添活力。现在，我们正式发布 Jetpack Compose 的 Alpha 版本，邀请您体验！

• Jetpack Compose

  https://developer.android.google.cn/jetpack/compose

开发者们通过构建应用演绎价值和实现理想。开发效率的提升离不开三个重要因素: 编程语言、集成开发环境 (IDE) 以及用户界面 (UI) 框架。我们为大家带来的 Jetpack Compose，目的就是为了让您 (我们也是！) 能在构建 UI 上更加高效！

起初，我们计划通过一系列的 Android Jetpack 开发库解决 Android 开发中最困难、最常见的问题，帮助开发者们在所有的 Android 版本上运行高质量的应用。如今 Google Play 商店排名前一万的应用中，已经有 84% 的应用使用了 Jetpack 库。

• Android Jetpack
  https://developer.android.google.cn/jetpack

进而，我们还了解到 Kotlin 深受开发者的喜爱，如今在排名前一千名的应用中，有超过 70% 的应用使用了 Kotlin，60% 的专业 Android 开发者都在使用 Kotlin。Google Home 应用使用了 Kotlin 之后，在某些情况下减少了 80% 代码行数，NullPointerExceptions 与过去同期相比减少 33%。还有，多邻国 (Duolingo) 应用使用了 Kotlin 之后，肉眼可见的代码行数平均减少了 30%。

• Google Home
  https://developer.android.google.cn/stories/apps/google-home
  
• 多邻国 (Duolingo)
  https://developer.android.google.cn/stories/apps/duolingo-kotlin

最后，我们通过社区收集到了一些强烈的建议，开发者们希望可以使用一些声明式的 API 来降低 UI 构建的难度。Jetpack Compose 结合刚刚提到的三点优势应运而生——可大规模构建高质量应用的 API、直观的编程语言以及响应式的编程模型。

Jetpack 的 Hello World

Jetpack Compose: Alpha 版现已发布

Jetpack Compose Alpha 版本提供了用于构建成熟 Android 应用所需的功能，不仅有高效的工具，还可以和现有 Android 视图进行互操作，您无需重新编写您的应用。Compose API 是与一组使用 Material Design 规范的示例应用一起设计和开发的！我们很高兴发布这些应用！您还可以直接在 Android Studio 中导入和浏览最新的示例。

• 规范的示例应用
  http://www.github.com/android/compose-samples
  
• 导入和浏览
  https://developer.android.google.cn/jetpack/compose/setup#sample

Alpha 版本发布内容如下: 

• Animations
• Constraint Layout
• 无障碍初步支持
• 输入和手势
• 与视图的互操作性 (可以在您现有的 app 中混合可以组合的功能)
• 懒加载列表
• Material UI 组件
• 性能优化
• 测试
• 文本和可编辑文本
• 主题和图形
• Window 管理

在与 JetBrains Kotlin 团队的紧密合作下，我们也为 Android Studio 4.2 canary 添加了一系列新功能来帮助您使用 Compose 构建应用:

• Compose 代码自动补全
• Compose 预览注解
• 部署单个可组合的组件到任何设备上
• 交互式 Compose 预览
• 可以生成代码的 Kotlin 编译器插件
• 适用于 Compose 的示例数据 API

• JetBrains Kotlin 团队

  https://kotlinlang.org/
  

• Romain 的视频 - Jetpack Compose

  https://www.youtube.com/watch?v=U5BwfqBpiWU
  

Compose 的编程思想

Compose 使用的编程模型与 Android 上现有的构建 UI 的模型完全不同。从历史上看，Android 的视图层次结构一直被描述为 UI 组件树。随着 app 状态的变化，需要更新 UI 层次结构来显示当前的数据。更新 UI 最常见的方法是使用像 findViewById() 这样的方法去遍历 UI 组件树，并通过调用类似下面的这些方法来改变节点:

button.setText(String)

container.addView(View)

img.setImageBitmap(Bitmap)

这些方法会改变组件的内部状态。这不仅乏味繁琐，而且手动更新视图也会增加出错的可能性 (例如忘记更新视图)。Jetpack Compose 是一种完全基于声明式组件的方法，这意味着您需要将 UI 描述为将数据转换为 UI 层级结构的函数。当基础数据发生变化时，Compose 框架会自动为您更新 UI 层次结构，从而使您可以轻松快速的构建 UI。

• 观看视频: 用 Compose 思考
  https://youtu.be/SMOhl9RK0BA

与现有 Android 视图完全互操作

对于现有的项目和代码库来说，采用任何新的框架都是一个很大的改变，这就是为什么我们把 Compose 设计得和 Kotlin 一样容易采用——它从一开始就可以与现有的 Android 代码完全互操作。

是否迁移到 Compose 取决于您和您的团队。如果您正在构建一个新的 app，最好的选择可能是使用 Compose 来实现 app 的整个 UI 界面。我们知道大多数人都有大量的现有代码库，可以将 Compose 与现有的 UI 设计结合起来，而无需重写应用。

可以通过以下两种主要的方式将 Compose 与基于视图的 UI 结合起来:

• 您可以添加 Compose 元素到现有的 UI，或者创建一个全新的基于 Compose 的屏幕，或者是向现有的 fragment 或视图布局中添加 Compose 元素。

• 您可以将基于视图的 UI 元素添加到可组合的函数中。这样做可以将不基于 Compose 的组件添加到基于 Compose 的组件中，例如: MapView 或 WebView。

我们也发布了一个新库 MDC Compose 主题适配器，它可以让您在 Compose UI 中复用现有的 Material Components 主题。

• MDC Compose 主题适配器

  https://material-components.github.io/material-components-android-compose-theme-adapter/
  

• Material Components

  https://material.io/develop/android/

要了解更多相关信息，请参阅 Compose for existing apps codelab 或查看以下两个示例:

• Tivi 和 Sunflower 展示了如何在现有项目中集成 Compose
• Crane 示例应用展示了如何在 Compose 嵌入一个 MapView

• Compose for existing apps codelab
  https://codelabs.developers.google.com/codelabs/android-compose-migration
• Tivi 
  
  http://tivi.app
  
• Sunflower
  http://goo.gle/sunflower-compose
• Crane 示例应用
  https://github.com/android/compose-samples/
• 观看视频: 将 Compose 加入现有的应用
  https://youtu.be/PjQdFmiDgwk

强大的工具

Android Studio 中包含了辅助您使用 Jetpack Compose 的强大工具，可以帮助您快递迭代 UI 元素。

借助 Compose 布局预览，您可以预览 Compose 组件，而无需将应用部署到设备或模拟器。在开发应用时，您的预览会更新，以帮助您更快地检查变更。要创建布局预览，请编写一个不使用任何参数的 Composable 函数，并添加:

@Preview annotation

完成应用构建后，预览功能的 UI 会出现在 Android Studio 的 Preview 窗格中。

Android Studio 提供了交互式预览模式。在交互式预览模式下，您可以在 UI 元素中点击或输入，UI 将会响应，就像是在已安装的应用中一样。

交互式预览工具

您也可以将单个可组合功能部署到物理设备或 Android Emulator。Android Studio 会创建一个新的 Activity，其中包含由将该功能所生成的 UI，并将其部署到您在设备上的应用。这样您就可以实际体验测试 UI，而无需重新安装整个应用或导航到当前页面。

可组合元素预览

开始使用 Jetpack Compose

要开始使用 Jetpack Compose，请参阅 Compose 教程并进行设置。或者直接进入示例应用并在 "Compose by Example" 中浏览这些应用:

• Compose 教程
  https://developer.android.google.cn/jetpack/compose/tutorial
• 进行设置
  https://developer.android.google.cn/jetpack/compose/setup#add-compose
• 示例应用
  https://www.github.com/android/compose-samples
• 观看视频: Compose 示例 
  https://youtu.be/DDd6IOlH3io

欢迎访问 Compose 学习计划，了解包括新增的 Codelab 和扩展文档的更多 Compose 资源。

• Compose 学习计划
  https://developer.android.google.cn/courses/pathways/compose
• 新增的 Codelab
  http://goo.gle/compose-codelabs

自我们去年开源 Jetpack Compose 以来，众多开发者为我们提供了宝贵反馈，使我们有了今天的成就，感谢大家！

我们还在提升 API 的稳定性和优化性能，因此目前还不建议您将 Compose 完全投入到生产环境中。但我们希望大家可以试用并向我们分享反馈。您也可以加入 Kotlin Slack 的 #compose 频道或在微信留言区与我们讨论。Compose 1.0 预期将在 2021 年发布。

• 分享反馈
  https://issuetracker.google.com/issues/new?component=612128
• Kotlin Slack
  https://surveys.jetbrains.com/s3/kotlin-slack-sign-up

---

推荐阅读

 点击屏末 | 阅读原文 | 即刻了解更多 Jetpack Compose 更多内容

---